import './TeacherAIChat.scss'
import { UserChatItem } from './components';
import { ArrowUpOutlined } from '@ant-design/icons';
import TextArea from 'antd/es/input/TextArea';
import { useEffect, useRef, useState } from 'react';
import { message as _message } from 'antd';

export default function TeacherAIChat() {
    const [chatList, setChatList] = useState([]);
    const [message, setMessage] = useState('');
    const chatArea = useRef(null);

    useEffect(() => {
        const chatDom = chatArea.current;
        chatDom.scrollTop = chatDom.scrollHeight;
    })

    function submitMsg() {
        console.log(message);
        if (message === '') {
            _message.error('不能发送空消息');
            return;
        }
        setChatList([...chatList, message]);
        console.log(chatList);
        setMessage('');
    }


    return (
        <div className="TeacherAIChat">
            <div
                ref={chatArea}
                className='chat-area'
            >
                {chatList.map((msg, index) => (<UserChatItem key={index} info={msg} />))}
            </div>
            <div className='input-area'>
                <TextArea
                    className='text-area'
                    autoSize
                    value={message}
                    onInput={e => { setMessage(e.target.value) }}
                />
                <button onClick={submitMsg}><ArrowUpOutlined /></button>
            </div>

        </div>
    )
}